<template>
	<view class="exchange">
		<view class="title">持仓信息</view>
		<view class="card">
			<view class="row flex-j-sb">
				<text class="txt">商品代码/名称</text>
				<text>{{dataList.goodsName}}</text>
			</view>
			<view class="row flex-j-sb">
				<text class="txt">持仓方向</text>
				<text>{{dataList.direction == 0?'买入':'卖出'}}</text>
			</view>
			<view class="row flex-j-sb">
				<text class="txt">持仓金额</text>
				<text>{{dataList.amount}}</text>
			</view>
			<view class="row flex-j-sb">
				<text class="txt">持仓数量</text>
				<text>{{dataList.num}}</text>
			</view>
			<view class="row flex-j-sb">
				<text class="txt">冻结数量</text>
				<text>{{dataList.freezeNum}}</text>
			</view>
			<view class="row flex-j-sb">
				<text class="txt">可用数量</text>
				<text>{{dataList.usableNum}}</text>
			</view>
			<view class="row flex-j-sb" v-if="!transfer">
				<text class="txt">最小交收数量</text>
				<text>1</text>
			</view>
			<view class="row flex-j-sb">
				<text class="txt">持仓均价</text>
				<text>{{dataList.averagePrice}}</text>
			</view>
			<view class="row flex-j-sb">
				<text class="txt">参考损益</text>
				<text class="red">{{dataList.profit}}</text>
			</view>
		</view>
		
		<template v-if="transfer">
			<view class="title">转让信息</view>
			<view class="card">
				<view class="row flex-j-sb">
					<text class="txt">当前价</text>
					<text>{{currentPirce}}</text>
				</view>
				<view class="row flex-j-sb">
					<text class="txt">转让价格</text>
					<view class="number-box flex-j-sb flex-a-c">
						<view class="num-btn decrease" @tap="minus(0)">
							<u-icon name="minus" color="#1989FA" size="17"></u-icon>
						</view>
						<input type="digit" class="num-ipt" v-model="transferPrice">
						<view class="num-btn" @tap="plus(0)">
							<u-icon name="plus" color="#fff" size="17"></u-icon>
						</view>
					</view>
				</view>
				<view class="row flex-j-sb">
					<text class="txt">转让数量</text>
					<view class="number-box flex-j-sb flex-a-c">
						<view class="num-btn decrease" @tap="minus(1)">
							<u-icon name="minus" color="#1989FA" size="18"></u-icon>
						</view>
						<input type="digit" class="num-ipt" v-model="transferNum">
						<view class="num-btn" @tap="plus(1)">
							<u-icon name="plus" color="#fff" size="18"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="btn" @tap="submit(1)">转让</view>
		</template>
		<template v-else>
			<view class="title">交收信息</view>
			<view class="card">
				<view class="row flex-j-sb">
					<text class="txt">交收对手方</text>
					<text>上海市南山怒气的就是盾快哈斯是对方是否是</text>
				</view>
				<view class="row flex-j-sb">
					<text class="txt">交收数量</text>
					<u-number-box inputWidth="100" step="1"
					 value="" bgColor="#fff" 
					 iconStyle="background-color:#1989FA;color:white;padding:10rpx;border-radius:50%;">
					 </u-number-box>
				</view>
				<view class="row flex-j-sb">
					<text class="txt">交收信息</text>
					<input type="text" class="ipt" v-model="submitVal" placeholder="请输入交收信息">
				</view>
			</view>
			<view class="btn" @tap="submit(2)">提交</view>
		</template>
	</view>
</template>

<script>
	import { getUserOrder,getCurrentPrice } from '@/api/home.js'
	export default {
		data() {
			return {
				_isLoading:false,
				transfer:false,
				submitVal:'', // 交收信息
				currentPirce:0, // 当前价
				transferNum:0, // 转移数量
				transferPrice:0, // 转移价格
				dataList:{
					goodsName:'',
					direction:'',// 持仓方向 0 为买入  1 为卖出
					amount:0,
					num:0,
					freezeNum:0,
					usableNum:0,
					averagePrice:0,
					profit:0,
				},
			};
		},
		onLoad(e) {
			if(e.direction) {
				this.dataList.direction = e.direction
			}
			let title = '交收'
			if(e.transfer) {
				this.transfer = true
				title = '转让'
			}
			uni.setNavigationBarTitle({
				title
			})
			this.getCurrPrice()
		},
		methods:{
			async getData(){ //  
				const res = await getUserOrder({
					// direction:this.direction, // 无效
					type:0, // 订立 
				})
				if(res.rows && res.rows.length) {
					let data = res.rows.filter(item => item.direction == this.dataList.direction)
					let averagePrice = 0
					let total = 0 // 总数量
					data.forEach(item =>{
						averagePrice += item.price * item.num
						total += item.num
					})
					this.dataList.averagePrice = (averagePrice / total).toFixed(2)
					this.dataList.amount = this.dataList.averagePrice * total * 100
					this.dataList.goodsName = res.rows[0].goodsName
					this.dataList.num = total
					this.dataList.usableNum = total
					this.transferNum = total
					this.transferPrice = this.currentPirce
					if(this.currentPirce >= 0) { // 是否有当前价
						if(this.dataList.direction == 0){ // 买入
							this.dataList.profit = ((this.currentPirce - this.dataList.averagePrice) * 100).toFixed((2))
						} else { // 卖出
							this.dataList.profit = ((this.dataList.averagePrice - this.currentPirce) * 100).toFixed((2))
						}
						
					}
					
				}
			},
			async getCurrPrice(){ //
				const res = await getCurrentPrice()
				// console.log(1111,res);
				this.getData() // 因为要获取当前价做计算
				if(res.data && res.data.length) this.currentPirce = res.data[0].last
			},
			submit(i) { // 1为转让 ，2为提交
				uni.showModal({
					content:`确定要${i===1?'转让':'提交'}吗`,
					complete: (result) => {
						if(result.confirm){
							console.log(2222);
							uni.$showToast(`${i===1?'转让':'提交'}成功`)
						}
					}
				})
			},
			minus(type){ // 0 为转让价格 1 为转让数量
				if(type === 0) {
					if(this.transferPrice <= 0) return 
					this.transferPrice = (+this.transferPrice - 0.01).toFixed(2)
				} else {
					if(this.transferNum <= 0) return 
					this.transferNum -= 1
				}
			},
			plus(type){ // 0 为转让价格 1 为转让数量
				if(type === 0) {
					if(this.transferPrice <= 0) return this.transferPrice = 0.01
					this.transferPrice = (+this.transferPrice + 0.01).toFixed(2)
				} else {
					if(this.transferNum <= 0) return this.transferNum = 1
					this.transferNum += 1
				}
			},
		}
	}
</script>

<style lang="less" scoped>
.exchange {
	padding: 20rpx;
	font-size: 28rpx;
	.title {
		color: gray;
		margin-bottom: 20rpx;
	}
	.card {
		padding: 0px 20rpx;
		margin-bottom: 20rpx;
		background-color: white;
		border-radius: 5px;
		.row {
			padding: 20rpx 0px;
			color: gray;
			text-align: right;
			+.row {
				border-top: 1rpx solid #eee;
			}
			.txt {
				flex-shrink: 0;
				margin-right: 20rpx;
				color: black;
			}
			.ipt {
				flex: 1;
			}
			.red {
				color: #E20000;
			}
		}
	}
}

.number-box {
	width: 50%;
	.num-btn {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: #1989FA;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.decrease {
		border: 1rpx solid #1989FA;
		background-color: transparent;
	}
	.num-ipt {
		text-align: center;
		flex: 1;
	}
	
}

.btn {
	width: 90%;
	padding: 20rpx 0px;
	margin: 60rpx auto 0px;
	border-radius: 5px;
	background-color: #C30D23;
	color: white;
	text-align: center;
}
</style>
